<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CRM登录页</title>
    <link rel="icon" href="${createLinkTo(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
    <link rel="shortcut icon" href="${createLinkTo(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"/>
    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
    <!-- Google font-->
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> -->
    <!-- Required Fremwork -->
    <asset:stylesheet src="mash/bower_components/bootstrap/dist/css/bootstrap.min.css"/>
    <!-- Style.css -->
    <asset:stylesheet src="mash/assets/css/style.css"/>
    <asset:stylesheet src="mash/bower_components/slideUnlock/drag.css"/>
    <asset:stylesheet src="mash/bower_components/toastr/toastr.min.css" />
    <style>
    .container-fluid{
        margin-top: -50px;
    }
    .login{
        background-color: #f3f3f3 !important;
    }
    </style>

</head>

<body class="fix-menu">
<section class="login p-fixed d-flex text-center">
    <!-- Container-fluid starts -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">

                <!-- Authentication card start -->
                <div class="login-card card-block auth-body">
                    <form action="/login/authenticate" method='POST' id='loginForm'>
                        <g:if test='${flash.message}'>
                            <div class='alert alert-dismissable alert-warning'>
                                <h4>Warning!</h4>

                                <p>${flash.message}</p>
                            </div>
                        </g:if>
                        <div class="text-center">
                            <asset:image src="logo.png" height="30" alt="logo.png"/>
                        </div>

                        <div class="auth-box z-depth-top-0">

                            <div class="row m-b-20">
                                <div class="col-md-12">
                                    <h3 class="text-left txt-primary">请登录</h3>
                                </div>
                            </div>
                            <hr>

                            <div class="input-group">
                                <input type="text" title="Please enter you username"
                                       name="username" placeholder="用户名"
                                       id="username" class="form-control  m-b-20" autofocus="autofocus">
                                <span class="md-line"></span>
                            </div>

                            <div class="input-group">
                                <input type="password" title="Please enter your password" placeholder="密码"
                                       name="password" id="password" class="form-control">
                                <span class="md-line"></span>
                            </div>
                            <div class="input-group" id="code-group">
                                <div id="drag"></div>
                            </div>

                            <p id="codeHelp" class="help-block small text-inverse b-b-default text-left p-b-5">请滑动解锁</p>

                            <div class="row m-t-30">
                                <div class="col-md-12">
                                    <button type="button" id="submitBtn"
                                            class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">登录</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- end of form -->
                </div>
                <!-- Authentication card end -->
            </div>
            <!-- end of col-sm-12 -->
        </div>
        <!-- end of row -->
    </div>
    <!-- end of container-fluid -->
</section>
<asset:javascript src="mash/bower_components/jquery/dist/jquery.min.js"/>

<asset:javascript src="mash/bower_components/tether/dist/js/tether.min.js"/>
<asset:javascript src="mash/bower_components/bootstrap/dist/js/bootstrap.min.js"/>
<asset:javascript src="mash/bower_components/slideUnlock/drag.js"/>
<asset:javascript src="mash/bower_components/toastr/toastr.min.js" />



<script>
    $(function () {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "progressBar": false,
            "positionClass": "toast-top-center",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        $.each($(".errors li"), function (i, obj) {
            toastr.warning($(obj).text().trim());
        });

        $('#drag').drag();
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (isMobile) {
            $("#code-group").remove();
        }
        $("#submitBtn").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            var drag_text = $(".drag_text").text();
            if (!username) {
                toastr.warning("请输入用户名");
                return;
            }
            if (!password) {
                toastr.warning("请输入密码");
                return;
            }
            if (!isMobile) {
                if (drag_text != "验证通过") {
                    toastr.warning("请输入滑动解锁");
                    return;
                }
            }


            $("#loginForm").submit();

        });


    })
</script>
</body>

</html>
